<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>智能客服</title>
    <script src="js/jquery-3.4.1.min.js"></script>
    <link rel="stylesheet" href="moudle/layui/css/layui.css"/>
</head>
<style type="text/css">
    .imgHead {
        height: 60px;
        width: 60px;
        border-radius: 50%;
        margin-left: 5px;
    }

    .contentBox {
        display: inline-block;
        height: auto;
        min-height: 25px;
        font-size: 14px;
        width: auto;
        max-width: 200px;
        padding: 10px;
        border-radius: 5%;
        background-color: #1E9FFF !important;
        color: white;
        margin-left: 5px;
    }
</style>
<body style="background-color: #F2F2F2;">
<div class="layui-header header" style="background-color: #1E9FFF!important;">
    <div style="display: inline-block;position: absolute;top: 5px;left: 40px ">
        <h1 style="color: white; font-size: 35px">懿梦千寻</h1>
    </div>
    <ul class="layui-nav layui-bg-blue" style="right: 0; position: absolute;">
        <li class="layui-nav-item"><a href="index.html">首页</a></li>
        <li class="layui-nav-item"><a href="donate.html">爱心捐赠</a></li>
        <li class="layui-nav-item layui-this"><a href="robot.html">联系客服</a></li>
        <li class="layui-nav-item"><a href="">关于我们</a></li>
    </ul>
</div>
<div style="padding: 20px; background-color: #F2F2F2;">
    <div style="width: 1000px; margin: 0 auto;">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">智能客服</div>
                    <div class="layui-card-body">
                        <div id="content" style="height: 500px; overflow:auto;">
                            <div style="float: left; clear: both;">
                            <span>
                                <img src="imgs/robot_head.jpg" class="imgHead"/>
                            </span>
                                <div class="robot contentBox"> 您好!请问您有什么疑问呢?</div>
                            </div>
                        </div>
                        <div>
                            <div class="layui-input-inline layui-col-md6">
                                <input type="text" id="inputText" name="inputText" class="layui-input">
                            </div>
                            <a id="sendText" class="layui-btn layui-btn-normal" style="margin-left: 5px;"
                               href="javascript:;">发送</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
<script src="moudle/layui/layui.all.js"></script>
<script>
    $(document).ready(function () {
        // 点击 id = sendText 的按钮时 触发 发送消息 事件
        $("#sendText").on("click",function () {
            sendMsg();
        });
        $("#inputText").on("keypress",function (e) {
            if (e.keyCode == 13) {
                sendMsg();
            }
        });
    });

    // 发送消息
    function sendMsg() {
        // 获取id = inputText的文本输入框的值 并赋值给inputText 变量
        var inputText = $("#inputText").val();
        // 添加消息到表格中
        appendMessageToTable4User("懿梦千寻", inputText, "right");
        $.ajax({
            url: "/donate/robotReplyText",
            data: {"inputText": inputText},
            type: "POST",
            success: function (data) {
                data = JSON.parse(data);
                // 添加返回消息遍历到表格中
                for (var temp in data.results) {
                    if (data.results[temp].resultType == 'text') {
                        appendMessageToTable4Robot("Mzlalal", data.results[temp].values.text);
                    }
                }
                console.log(data);
            },
            error: function (data) {
                console.log(data);
            }
        });

        // 清空输入框的值
        $("#inputText").val("");
    }

    // 添加返回消息到表格中
    function appendMessageToTable4Robot(username, text) {
        var html = "";
        html += "<div style=\"float: left; clear: both;\">";
        html += "<span>";
        html += "<img src=\"imgs/robot_head.jpg\" class=\"imgHead\"/>";
        html += "</span>";
        html += "<div class=\"robot contentBox\">" + text + "</div>";
        html += "</div>";
        $("#content").append(html);
    }

    // 添加用户消息到表格中
    function appendMessageToTable4User(username, text) {
        var html = "";
        html += "<div style=\"float: right; clear: both;\">";
        html += "<div class=\"robot contentBox\">" + text + "</div>";
        html += "<span>";
        html += "<img src=\"imgs/user_head.jpg\" class=\"imgHead\"/>";
        html += "</span>";
        html += "</div>";
        $("#content").append(html);
    }
</script>
</html>